<template>
  <div id="trade"></div>
</template>

<script>
import { findTradeDict } from '../../../api/index';
import { selecttrades } from '../../../api/dataCenter';
export default {
  name: 'trade',
  data () {
    return {
      name: [],
      data: []
    };
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('trade'));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: this.name,
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            type: 'bar',
            stack: '总量',
            itemStyle: {
              color: 'blue'
            },
            label: {
              show: true,
              position: 'right',
              textStyle: {
                color: '#fff'
              }
            },
            data: this.data
          }
        ]
      });
    }
  },
  mounted () {
    let obj = {};
    findTradeDict()
      .then(data => {
        if (data.success) {
          console.log(data);
          data.data.forEach(item => {
            obj[item.name] = item.code;
          });
          console.log(obj);
          return selecttrades();
        }
      })
      .then(data => {
        console.log(data);
        if (data.success) {
          this.data = Object.keys(obj).map(val => {
            return data.data.find(item => {
              return obj[val] === item.trade;
            }).tradeCount;
          });
          this.name = Object.keys(obj);
          console.log(this.data);
          this.drawLine();
        }
      });
  }
};
</script>

<style scoped>
#trade {
    width: 500px;
    height: 504px;
    border: 1px dashed rgb(54, 164, 180, 0.6);
    border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    background: url('../../../assets/img/trade.png') no-repeat;
    background-size: cover;
    color: rgba(255, 255, 255, 1);
}
</style>